import {
  AddNewTab,
  changeStateTab,
  changeValueTab,
  deleteTab,
  getAllTab,
} from '@/service/tab';
import ProTable, {
  ActionType,
  ProColumns,
  TableDropdown,
} from '@ant-design/pro-table';
import React, { useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, message, Popconfirm } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormSelect,
} from '@ant-design/pro-form';
import { ITab } from '@/interface/tab';

export default function TabContent() {
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '标签名称',
      dataIndex: 'lable',
      width: 200,
      editable: false,
    },
    {
      title: '标签值',
      dataIndex: 'value',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'state',
      editable: false,
      valueEnum: {
        true: { text: '已启用', color: 'green' },
        false: {
          text: '已禁用',
          color: 'red',
        },
      },
    },
    {
      title: '操作',
      align: 'center',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, _record, index, action) => [
        <a
          key={'changeState' + _record.value}
          onClick={() => {
            changeTabState(_record);
          }}
        >
          {_record.state ? '禁用' : '启用'}
        </a>,
        <div key={'changValue' + _record.value}>
          <ModalForm<{ value: string }>
            title={'更改' + _record.lable + '标签值'}
            trigger={<a>更改值</a>}
            autoFocusFirstInput
            submitTimeout={2000}
            onFinish={async (value) => {
              const params: ITab = {
                lable: _record.lable,
                value: value.value,
                state: _record.state,
              };
              const data = await changeValueTab(params);
              if (data.stat === 'ok') {
                message.success('修改成功');
                actionRef.current?.reload();
                return true;
              } else {
                message.error(data.msg);
              }
            }}
          >
            <ProForm.Group>
              <ProFormText
                width="md"
                name="value"
                label="更改的标签值"
                tooltip="为英文"
                placeholder="请输入标签值"
              />
            </ProForm.Group>
          </ModalForm>
        </div>,
        <div key={'deleteTab' + _record.value}>
          <Popconfirm
            onConfirm={() => {
              deleteTabHandle(_record);
            }}
            title={'请确认是否删除该标签'}
          >
            <a>删除</a>
          </Popconfirm>
        </div>,
      ],
    },
  ];

  async function deleteTabHandle(params: ITab) {
    const data = await deleteTab(params);
    if (data.stat === 'ok') {
      message.success('操作成功');
      actionRef.current?.reload();
    } else {
      message.error('操作失败,' + data.msg);
    }
  }

  async function changeTabState(params: ITab) {
    const data = await changeStateTab(params);
    if (data.stat === 'ok') {
      message.success('操作成功');
      actionRef.current?.reload();
    } else {
      message.error('操作失败,' + data.msg);
    }
  }
  return (
    <React.Fragment>
      <ProTable
        actionRef={actionRef}
        pagination={{ pageSize: 7, current: 1, showSizeChanger: true }}
        columns={columns}
        rowKey={'value'}
        request={async (params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          const data = await getAllTab({
            offset: (params.pageSize || 7) * ((params.current || 1) - 1),
            limit: params.pageSize || 7,
            state:
              params.state === 'false'
                ? false
                : params.state === 'true'
                ? true
                : undefined,
            lable: params.lable,
          });
          return data.data;
        }}
        toolBarRender={() => [
          <ModalForm<{ lable: string; value: string; state: string }>
            title="新建标签"
            trigger={
              <Button type="primary">
                <PlusOutlined />
                新建标签
              </Button>
            }
            autoFocusFirstInput
            submitTimeout={2000}
            onFinish={async (value) => {
              const params: ITab = {
                value: value.value,
                lable: value.lable,
                state: value.state === '1' ? true : false,
              };
              const data = await AddNewTab(params);
              if (data.stat === 'ok') {
                message.success('提交成功');
                actionRef.current?.reload();
                return true;
              } else {
                message.error(data.msg);
              }
            }}
          >
            <ProForm.Group>
              <ProFormText
                width="md"
                name="lable"
                label="标签名"
                tooltip="最长为8位"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                tooltip="值为英文"
                width="md"
                name="value"
                label="标签值"
                placeholder="请输入值"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormSelect
                request={async () => [
                  {
                    value: '0',
                    label: '禁用',
                  },
                  {
                    value: '1',
                    label: '启用',
                  },
                ]}
                width="xs"
                name="state"
                label="初始状态"
              />
            </ProForm.Group>
          </ModalForm>,
        ]}
      />
    </React.Fragment>
  );
}
